<template>
    <XTable ref='tableRef' selection :api='chargeStrategyPaginationApi' :columns='columns' @selectionChange='selectionChange'>
        <template #toolBar>
            <router-link to='/chargeStrategy/add/'>
                <el-button type='primary' size='mini'>新增</el-button>
            </router-link>
        </template>

        <template #rules='{value}'>
            <template v-if='value'>
                <template v-for='(rule, index) in value'>
                    <div>{{rule.w}}W{{rule.a}}元/小时</div>
                </template>
            </template>
        </template>

        <template #action='{row}'>
            <template v-if='row'>
                <router-link class='m-l-5' :to='"/chargeStrategy/edit/" + row.strategyId'>
                    <el-button type='text'>编辑</el-button>
                </router-link>
            </template>
        </template>
    </XTable>
</template>

<script lang='ts' setup>
    import { onActivated, reactive, ref } from 'vue'
    import { chargeStrategyPaginationApi } from '../../api/chargeStrategy'
    import { ElMessage } from 'element-plus'
    import { Column } from '../../type'

    const columns:Column[] = [
        {title : '策略名', dataIndex : 'strategyName', inFilter : true},
        {title : '类型', dataIndex : 'strategyType', inFilter : false, formatter : row => (row.strategyType == 1 ? '计时' : '计量')},
        {title : '单价', dataIndex : 'unitPrice', inFilter : false, formatter : row => row.minPower + '元/' + (row.strategyType == 1 ? '小时' : '度')},
        {title : '结算单位', dataIndex : 'settleUnit', inFilter : false, formatter : row => row.settleUnit + (row.strategyType == 1 ? '分钟' : '度')},
        {title : '最小功率', dataIndex : 'minPower', inFilter : false, formatter : row => row.minPower + 'W'},
        {title : '最大功率', dataIndex : 'maxPower', inFilter : false, formatter : row => row.maxPower + 'W'},
        {title : '刷卡预付费', dataIndex : 'cardChargeAmount', inFilter : false, formatter : row => row.cardChargeAmount + '元'},
        {title : '策略规则', dataIndex : 'rules', inFilter : false},
    ]

    let selectedIds = reactive([])
    const tableRef = ref()
    const isFirst = ref(true)

    function selectionChange(rows:any[]) {
        selectedIds.splice(0)
        selectedIds.push(...rows.map(row => row.strategyId))
    }

    onActivated(() => {
        if(isFirst.value) {
            isFirst.value = false
        }else {
            tableRef.value.load()
        }
    })

</script>